<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex 布局</title>
</head>
<style>
    .box {
        display: flex;
        /**
            flex-start（默认值）：左对齐
            flex-end：右对齐
            center： 居中
            space-between：两端对齐，项目之间的间隔都相等。
            space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
         */
        justify-content: space-around;
        /**
            flex-start：交叉轴的起点对齐。
            flex-end：交叉轴的终点对齐。
            center：交叉轴的中点对齐。
            baseline: 项目的第一行文字的基线对齐。
            stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
         */
        align-items: center;
        /*
            nowrap（默认）：不换行
            wrap：换行，第一行在上方。
            wrap-reverse：换行，第一行在下方。
         */
        flex-wrap:nowrap;
        height: 500px;
        border: 1px solid red;
    }

    .box div {
        padding: 10px;
        height: 50px;
        width: 500px;
        background-color: #b4b4f3;
        text-align: center;
        border: 1px solid green;
    }
</style>

<body>

<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>
</body>

</html>